<template>
  <div class="news-detail">
    <div class="content-wrapper">
      <el-card class="detail-card">
        <h1 class="title">{{ news.title }}</h1>
        <div class="meta">
          <span class="time">发布时间：{{ formatDate(news.createTime) }}</span>
          <span class="author">作者：{{ news.author }}</span>
          <span class="views">浏览量：{{ news.views }}</span>
        </div>
        <div class="content" v-html="news.content"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const news = ref({})

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleString()
}

const loadNews = async () => {
  try {
    const res = await request.get(`/api/news/${route.params.id}`)
    if (res.code === 200) {
      news.value = res.data
    }
  } catch (error) {
    console.error('加载新闻详情失败:', error)
  }
}

onMounted(() => {
  loadNews()
})
</script>

<style lang="scss" scoped>
.news-detail {
  .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .detail-card {
    padding: 20px;

    .title {
      font-size: 24px;
      color: #303133;
      margin: 0 0 20px;
      text-align: center;
    }

    .meta {
      display: flex;
      justify-content: center;
      gap: 20px;
      color: #909399;
      font-size: 14px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
    }

    .content {
      line-height: 1.8;
      color: #606266;
      font-size: 16px;

      ::v-deep(img) {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
      }

      ::v-deep(p) {
        margin: 16px 0;
      }
    }
  }
}
</style> 